<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
    <!-- 
    js中数组长度自动可变，类型也可以随意
    定义：
       1. var 变量名 = new Array();
       2. var 变量名 = [];   (等价，都在堆区)
    -->
    <script>
        arr = [1, "ok", false, null, 5];
        arr[8] = '直接跨级定义';
        arr.push('添加到最后');
        document.write(arr + "<br>");
        //for循环遍历，length属性可以获取数组长度
        for (let i = 0; i < arr.length; i++)
            document.write(arr[i] + '  '); //遍历数组,会输出未定义元素
        document.write("<br>");
        //forEach遍历数组,不会输出未定义元素
        arr.forEach(element => {
            document.write(element + '  '); //forEach遍历数组,不会输出未定义元素
        });
        document.write("<br>");
        arr.splice(4, 4) //删除从索引4开始的4个元素
        document.write(arr + "<br><br>");
    </script>
    <!-- 
    字符串
    定义：
       1. var 变量名 = new String();
       2. var 变量名 = '字符串';   (等价，都在堆区)
    方法：
     length：获取字符串长度
     charAt(index)：返回指定索引位置的字符
     indexOf(str)：返回指定字符串首次出现的索引位置
     lastIndexOf(str)：返回指定字符串最后一次出现的索引位置
     substring(start, end)：提取字符串中从start到end之间的字符
     slice(start, end)：提取字符串中从start到end之间的字符
     substr(start, length)：提取字符串中从start开始的指定长度的字符
     toUpperCase()：将字符串转换为大写
     toLowerCase()：将字符串转换为小写
     trim()：移除字符串首尾的空格
    -->
    <script>
        var str = '   Hello World   ';
        document.write(str + "<br>"); //html会自动去掉字符串首尾的空格
        document.write("字符串长度：" + str.length + "<br>");
        document.write("第5个字符是：" + str.charAt(5) + "<br>");
        document.write("首次出现'l'的索引：" + str.indexOf('l') + "<br>");
        document.write("最后出现'l'的索引：" + str.lastIndexOf('l') + "<br>");
        document.write("从索引1到索引5的子字符串：" + str.substring(1, 5) + "<br>");
        document.write("从索引1到索引5的子字符串：" + str.slice(1, 5) + "<br>");
        document.write("从索引1开始的5个字符：" + str.substr(1, 5) + "<br>");
        document.write("转换为大写：" + str.toUpperCase() + "<br>");
        document.write("转换为小写：" + str.toLowerCase() + "<br>");
        document.write("移除首尾空格：" + str.trim() + "<br><br>");
    </script>
    <!-- 
     ja中的自定义对象
     var 名字={
        属性1：值1,
        属性2：值2,
        方法1：function(){
            代码块
        }
     };
    -->
    <script>
        var person = {
            name: '张三',
            age: 18,
            sex: '男',
            sayName: function () {
                document.write("我是" + this.name + "，我今年" + this.age + "岁，我是" + this.sex + "<br><br>");
            }
        };
        document.write("person对象是：" + person + "<br>");//直接输出对象，只会显示"[object Object]"
        document.write("person.name：" + person.name + "<br>");
        person.sayName();
    </script>
    <!-- 
     json(JavaScript Object Notation) js对象标记法
     json是通过js对象的方式来表示的(键值对的方式)
     语法简单，层次结构清晰，多用于作为数据载体
     定义：
        var 变量名={"key1":"value1","key2":"value2"};
     将json字符串转换为js对象：
        var js对象=JSON.parse(json字符串);
     将js对象转换为json字符串：
        var json字符串=JSON.stringify(js对象);
    -->
    <script>
        var jsonstr = '{ "name": "李四", "age": 18, "addr": ["北京", "上海"] }';
        document.write("json字符串是：" + jsonstr + "<br>");
        var obj = JSON.parse(jsonstr); //将json字符串转换为js对象
        document.write("输出json字符串转成js对象的addr属性第二个元素：" + obj.addr[1] + "<br>");
        document.write("将js对象转回为json字符串：" + JSON.stringify(obj) + "<br><br>");
    </script>
    <!-- 
    BOM(Browser Object Model) 浏览器对象模型
    浏览器对象模型(BOM) 是指浏览器提供的一组对象，用于与浏览器窗口进行交互。
    这些对象提供了访问和操作浏览器窗口、文档、导航历史、cookie 等功能的方法和属性。
    BOM 是 JavaScript 中与浏览器相关的部分，它允许开发人员通过 JavaScript 来控制浏览器的行为和功能。
    如：
    window：表示浏览器窗口对象，用于访问浏览器窗口的属性和方法。
    location：表示当前页面的 URL 对象，用于获取和操作当前页面的 URL。
    history：表示浏览器的导航历史对象，用于访问和操作浏览器的导航历史。
    navigator：表示浏览器的信息对象，用于获取浏览器的相关信息。
    -->
    <!-- 
    window:
    表示浏览器窗口对象，用于访问浏览器窗口的属性和方法,直接使用window方法时候可以省略window
    属性：
       history：表示浏览器的导航历史对象，用于访问和操作浏览器的导航历史。
       location：表示当前页面的 URL 对象，用于获取和操作当前页面的 URL。
       navigator：表示浏览器的信息对象，用于获取浏览器的相关信息。
    方法：
       alert()：弹出警告框
       confirm()：弹出确认框，返回一个布尔值
       setTimeout()：在指定的毫秒数后调用一个函数
       setInterval()：按照指定的毫秒数重复调用一个函数
       setTimeout()：在指定的毫秒数后调用一个函数


    Location
    表示当前页面的 URL 对象，用于获取和操作当前页面的 URL。
    使用window.location获取，window可以省略
    属性:
       href：设置或者返回完整的
    -->
    <script>
        var flag = confirm("你确定要删除吗？");
        if (flag) document.write("删除成功");
        else document.write("删除失败");

        // var i = 0;
        // setInterval(function () {
        //     ++i;
        //     document.write("第" + i + "次执行，当前时间：" + new Date() + "<br>");
        // }, 1000);  //每1000毫秒(1秒)调用一次函数


        // document.write("<br>四秒后自动跳转到百度首页");
        // setTimeout(function () {
        //     window.location.href = "https://www.baidu.com";
        // }, 4000);
    </script>
    <!--  
    DOM(Document Object Model) 文档对象模型
    DOM 是指文档对象模型，它是一种用于表示和操作 HTML 或 XML 文档的编程接口。
    DOM 提供了一种结构化的方式来访问和操作文档的元素、属性和内容。
    通过 DOM，开发人员可以使用 JavaScript 来动态地创建、修改和删除文档的元素，以及响应文档的事件。
       Document：表示整个 HTML 文档对象，用于访问和操作文档的元素、属性和内容
       Element：表示文档中的元素对象，用于访问和操作元素的属性和内容
       Attribute：表示元素的属性对象，用于访问和操作元素的属性
       Text：表示元素中的文本节点对象，用于访问和操作元素的文本内容
       Comment：表示文档中的注释节点对象，用于访问和操作文档的注释内容
    JavaScript通过DOM可以访问和操作HTML文档
        改变html元素内容
        改变css
        对html的DOM事件做出响应
        添加删除html元素


    Document对象提供了以下方法获取Element元素
      1.根据id获取单个对象：
        var element=document.getElementById("id")
      2.根据标签名获取对象数组：
        var elements=document.getElementsByTagName("tagName")
      3.根据类名获取对象数组：
        var elements=document.getElementsByClassName("className")
      4.根据name属性获取对象数组：
        var elements=document.getElementsByName("name")
        

    事件监听
      事件就是发生在对象上的某个动作，如点击、鼠标移动、键盘输入等
      事件监听就是给对象添加一个事件处理函数，当事件发生时，调用该函数

      方式1:通过标签中的事件进行绑定
        <input type="button" value="按钮" onclick="onclick()">

        <script>
            function onclick() {
                document.write("按钮被点击了");
            }
        </script>
       方法2：通过DOMh元素绑定
        <input type="button" value="按钮" id="btn">

        <script>
            var btn = document.getElementById("btn");
            btn.onclick = function () {
                document.write("按钮被点击了");
            }
        </script>


        具体使用参考 注册界面3.html
    -->
</body>

</html>